<template>
	<div class="articleitem">
		<div class="card" @click="view(id)">
			<div class="me-article-header">
				<div class="headerLeft">
					<div class="face">
						<img :src="author.face" alt="">
					</div>
					<a class="me-article-title">
						<b>{{ author.username }}</b>&nbsp;&nbsp;<span>{{ StarDate ? '发布的' : '发布了' }}</span>&nbsp;&nbsp;<b>{{
							title }}</b></a>
				</div>
				<div v-if="StarDate" style="font-size: 12px;color:gray;">收藏于{{StarDate|format }}</div>

			</div>

			<div class="me-artile-description">
				{{ content }}
			</div>
			<div class="foot">
				<div class="store">
					<div size="small">文章来自知识库：{{ store.name }}</div>
				</div>
				<div class="me-article-count">
					<div class="viewcount"> <i class="el-icon-view"></i>&nbsp;{{ viewcount }}</div>
					<div style="text-align:right">
						<i class="el-icon-time"></i>&nbsp;{{ first_pub | format }}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'articleitem',
	props: {
		id: Number,
		title: String,
		content: String,
		author: Object,
		store: Object,
		first_pub: String,
		viewcount: Number,
		StarDate: String
	},
	data() {
		return {

		}
	},
	methods: {
		view(id) {
			this.$router.push(`/article/${id}`)
		},
		randomRgb() {
			var str = ['#70af7e', '#50b3b3', '#30c59b', '#66acd8', '#e18283', '#f5a379', '#3dd2e2', '#82c77b',
				'#d6c06e'
			];
			let t = str[Math.floor(Math.random() * str.length)];
			return {
				color: `${t} !important`,
			};
		},
	}
}
</script>

<style scoped="scoped">
body {
	font-size: 20px;
}

.articleitem {
	display: flex;
	justify-content: flex-start;
	margin: 10px 20px;
}

.card {
	width: 100%;
	border: none;
	border-bottom: 1px solid #ecedf2;
	box-shadow: none;
	padding: 10px;
	cursor: pointer;
}

.face img {
	height: 40px;
	width: 40px;
	border-radius: 50%;
}

.me-article-title {
	text-decoration: none;
	font-size: 13px;
	line-height: 22px;
}

.face {
	margin: 5px 15px 5px 0;
}

.me-article-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.headerLeft{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
.viewcount {
	font-size: 12px;
	margin: 5px 0;
	margin-right: 20px;
}

.card:hover {
	background: rgb(226, 240, 253);
}

b {
	color: rgb(16, 42, 75);
	width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.me-artile-description {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 600px;
	margin: 10px 0;
	font-size: 14px;
}

.foot {
	margin-top: 20px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.me-article-count {
	font-size: 12px;
	color: rgb(133, 133, 133);
	display: flex;
	flex-direction: row;
	align-items: center;
}

.store {
	font-size: 13px;
	color: rgb(119, 118, 118);
}
</style>
